<!-- 商品管理-列表
 * @Descripttion: 
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-10
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-04-10
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="名称">
            <a-input v-model:value="searchParam.goodsName" placeholder="请输入商品名称" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="18">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">商品管理</span>
        <a-button type="primary" @click="addProduct()">
          <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
          新建
        </a-button>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'deleted'">
            {{ record.deleted ? '是' : '否' }}
          </template>
          <template v-if="column.key === 'action'">
            <span>
              <a @click="edit(record)">编辑</a>
              <a-divider v-if="!record.deleted" type="vertical" />
              <a-popconfirm v-if="!record.deleted" title="确定删除此商品?" @confirm="deleteRecord(record)">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestDeleteGoods, requestGetGoodsList } from '/@/api/business/tracecode/goods'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({
    goodsName: '',
  })

  /** 表格列配置 */
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      customRender: (row) => `${row.index + 1}`,
    },
    { title: '商品', dataIndex: 'goodsName' },
    { title: '创建时间', dataIndex: 'createdTime', key: 'createdTime' },
    { title: '删除', dataIndex: 'deleted', key: 'deleted' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetGoodListTypes.IRequest, GetGoodListTypes.IResponse[]>(searchParam, requestGetGoodsList)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.goodsName = ''
    search()
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 新增
   */
  const addProduct = () => {
    router.push({
      path: '/code/productManage/edit',
    })
  }

  /**
   * 删除
   */
  const deleteRecord = async (record: GetGoodListTypes.IResponse) => {
    const { id } = record
    const { responseCode } = await requestDeleteGoods({ goodId: id })
    if (responseCode === HttpCodeEnum.SUCCESS) search()
  }

  /**
   * 编辑
   * @param record 商品
   */
  const edit = (record: GetGoodListTypes.IResponse) => {
    const { id } = record
    router.push({
      path: '/code/productManage/edit',
      query: { id },
    })
  }
</script>

<style lang="less" scoped></style>
